// import $ from 'zepto';
import './sass/index.scss';

let swiper = new Swiper('.swiper-container', {
  direction: 'vertical',
  onSlideChangeEnd: function (swiper) {
    $('.swiper-slide').eq(swiper.activeIndex).addClass('animate').siblings()
      .removeClass('animate');
    if (swiper.activeIndex == 2) {
      $('.swiper-slide').eq(2).addClass('swiper-no-swiping')
    }
  }
})

$(function () {
  setTimeout(function () {
    $('.loading').addClass('animate')

    // document.querySelector('.loading .step').addEventListener('animationend', function(){

    // })
    $('.loading .step').on('animationend', function () {
      $('.loading').fadeOut(1000, function () {
        $('.welcome').addClass('animate')
      })
    })
  }, 300)

  $('.welcome .circle-btn-box').longTap(function () {
    $('.welcome .bear-box').css('animation', 'bearDisappear 1s forwards')
    setTimeout(function () {
      $('.welcome').fadeOut(1000, function () {
        $('.swiper-container .swiper-slide').first().addClass('animate');
      })
    }, 1000)
  })

  $('.page3').tap(function () {
    $('.swiper-slide').eq(2).removeClass('swiper-no-swiping');
    var index = 0;
    var timer = setInterval(function () {
      $('.page3 .bear').css('animation', 'none');
      $('.animation-bear-box div').css('opacity', 0);
      $('.normal-card div').eq(index).css('animation', 'none');
      $('.animation-bear-box div').eq(index).css('opacity', 1);
      $('.hit-box div').eq(index).css('opacity', 1);
      index++;
      if (index == 3) {
        // setTimeout(function () {
        //   $('.hit-box div').css({
        //     transform: 'translateY(100%)',
        //     opacity: 0
        //   })
        // }, 500)
        $('.hit-box div').css('animation', 'bearDisappear 1s forwards');
        clearInterval(timer);
      }
    }, 1000)
  })
})